import $ from 'jquery';
import cx from 'classnames';
import React from 'react';
import ReactDOM from 'react-dom';

import 'weui/src/style/weui.less';
import style from './styles.css';

import Explore from './Explore';
import PostContainer from './PostContainer';

class BottomBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 'explore'
    };
  }

  render() {
    return (
      <div className={`weui_tabbar ${style.bottomBar}`}>
        {[
          ['explore', '发现'],
          ['follow', '关注'],
          ['message', '消息'],
          ['center', '中心'],
        ].map(([icon, name], index)=>(
          <a key={index}
             className={cx("weui_tabbar_item")}
             onClick={()=>this.setState({activeTab: icon})}>
            <div className="weui_tabbar_icon">
              <img src={`/static/images/${icon}${icon == this.state.activeTab ? '.highlight' : ''}.png`} alt=""/>
            </div>
            <p className="weui_tabbar_label">{name}</p>
          </a>
        ))}
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 'explore'
    };
  }

  render() {
    return (
      <div>
        <Explore/>
        <PostContainer/>
        <div className="tabbar">
          <div className="weui_tab">
            <div className="weui_tab_bd">

            </div>
            <BottomBar/>
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, $("#container")[0]);
